<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-15 15:43:50
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-15 20:44:50
-->
<template>
    <div class="app2">
      <div id="left">
        <el-text class="leftUp" type="warning" style="font-size: 20px;color:orange">用户登录</el-text>
        <br>
        <el-text class="leftDown" type="warning" style="font-size:16px;color:antiquewhite">USE Login</el-text> 
      </div>
      <div class="center">
        <div class="divFrom">
          <label> 用户名
            <el-input v-model="username" style="width: 240px" placeholder="请输入账号" >用户名</el-input>
          </label>
          <br><br>
          <label> 密码
            <el-input v-model="password" style="width: 256px" type="password" placeholder="请输入密码"  show-password>密码</el-input>
          </label>
          <br><br>
          <el-button @click="login" class="tdSubmit" v-model="value2" colspan="2">登录</el-button>
        </div>
      </div>
      <div class="Right">
        <el-text>没有账号，立即<RouterLink to="/Register" style="color:pink">注册</RouterLink></el-text>
      </div>
    </div>
    </template>
<script setup>
    import{ref}from 'vue'
      const username=ref("");
      const password=ref("");
      function login(){
        if(username.value==="admin"&&password.value==="123"){
            alert("登录成功");
      }else{
          alert("登录失败");
    }
  }
</script>
<style>
.app2{
  /* border: 1px solid red; */
  width: 900px;
  height: 500px;
  /* border: 8px solid #eee; */
  border: 8px solid rgb(220, 219, 217);
  /* 让div水平居中 */
  margin: auto;
  background-color: white;
}
#left{
  float: left;
  width: 25%;
  padding-top: 15px;
  padding-left: 15px;
  /* font-size: 20px; */
}
.center{
  float: left;
  padding-top: 40px;
  width: calc(100% - 25% - 25%);
}
.tdSubmit{
  text-align: center;
  margin-left: 50px;
  width:100px;
  color:palevioletred;
}
#right{
    padding-top:100000000px;
    float: right;
    width: 25%;
    padding-top: 15px;
    padding-right: 10px;
  }
</style>
